import { cn } from '@/utils/cn'
import { NavLink } from 'react-router-dom'

interface SidebarItemProps {
  to: string
  icon: React.ReactNode
  label: string
}

export function SidebarItem(props: SidebarItemProps) {
  return (
    <NavLink
      to={props.to}
      className={({ isActive }) =>
        cn(
          'flex flex-col justify-center items-center w-16 h-[4.5rem] space-y-2 text-secondary-foreground cursor-pointer select-none transition-all duration-300 rounded-lg hover:bg-foreground/10',
          isActive ? 'opacity-100' : 'opacity-40',
        )
      }
    >
      {props.icon}
      <div className='text-sm leading-4 select-none'>{props.label}</div>
    </NavLink>
  )
}
